<template>
    <div>
        <header-ele>购物车</header-ele>
        <div class="shopcar-container" v-if="$store.state.shopInfo&&$store.state.shopInfo.length>0">
            <van-swipe-cell v-for="item in $store.state.shopInfo" :key="item.id">
        <div class="shopcart-box">
            <van-checkbox v-model="item.checked" checked-color="#F63515"></van-checkbox>
            <div class="shopcar-content" @click="toDetail($event,item.productId)">
                <img :src="item.imageHost+item.mainImage">
            <div class="shopcart-item-info">
                <p class="shopcart-name">{{item.name}}</p>
                <p class="shopcart-subtitle">{{item.subtitle}}</p>
                <div class="shopcart-stepper" ref="changeCount">
                    <span class="shopcart-price">￥{{item.price}}</span>
                    <van-stepper v-model="item.count" min="1" max="999"/>
                </div>
            </div>
            </div>
            
        </div>
        <template slot="right">
            <van-button square type="danger" text="删除" @click="delshop(item.productId)" />
        </template>
            </van-swipe-cell>
            
        </div>

        <div v-else>
         <div class="shopcart-empty">
        <img src="//img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png">
        <p>购物车空空如也，去逛逛吧~</p>
    </div>
        </div>
<!-- 推荐 -->
<!-- <section class="shopcart-page">
    <div class="shopcart-list">
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
        <shopcart-box></shopcart-box>
    </div>
</section> -->
<product-recommentd></product-recommentd>
<van-submit-bar :price="allMoney" button-text="提交订单" @submit="onSubmit" v-if="$store.state.shopInfo&&$store.state.shopInfo.length>0">
    <van-checkbox v-model="checked" checked-color="#F63515">全选</van-checkbox>
</van-submit-bar>

    </div>
</template>

<script>
import productRecommentd from '../components/productRecommend.vue'
import headerEle from '../components/header.vue'
export default {
    created(){
        this.$store.commit('changeFooterShow',true)
        console.log(this.$store.state.shopInfo);
    },
    computed:{
        checked:{
            // 全选反设置单选
         set(){
             this.$store.commit('changeShopListChecked',!this.$store.state.shopInfo.every((item)=>{
                return item.checked == true
            }))
             return  !this.$store.state.shopInfo.every((item)=>{
                return item.checked == true
            })
         },
        //  单选设置全选
         get(){
             return this.$store.state.shopInfo.every((item)=>{
                return item.checked == true
            })
         }
        },
        // 计算被选中商品总价格
        allMoney(){
            return this.$store.state.shopInfo.reduce((due,val)=>{
                if(val.checked ==false) return due
                return due+val.count*val.price
            },0)*100
        }
    },
    components:{
        headerEle,
        productRecommentd
    },
    methods: {
        onSubmit(){

        },
        toDetail(e,id){
            if(e.target.className == 'van-stepper__plus'||e.target.className == 'van-stepper__minus'||e.target.className == 'van-stepper__input'){
                return
            }
            this.$router.push({name:'Product-detail',params:{id}})      
        },
        delshop(id){
            console.log(id);
            this.$axios({
                url:'cart/del',
                method:'post',
                Headers:{'contentType':'application/x-www-form-urlencoded'},
                data:{id}
            }).then((res)=>{
                console.log(res);
            })
        }
    },
}
</script>
<style lang="scss" scoped>
@import '../common/style/mixin.scss';
.shopcart-empty{
    margin-top: 100px;
    padding-bottom: 50px;
    height: 300px;
    text-align: center;
    img{
        widows: 100%;
        height: 100%;
    }
}
.shopcar-container {
    margin-top: 100px;
    .shopcart-box {
        display: flex;
        justify-content: space-around;
        background: #fff;
        padding: 10px;
        margin: 30px 0;
        .shopcar-content{
            display: flex;
            flex: 1;
        }
        img {
            width: 180px;
            height: 180px;
            margin: 0 10px;
        }

        .shopcart-item-info {
            display: flex;
            flex: 70%;
            flex-direction: column;
            justify-content: space-between;

            .shopcart-name {
                height: 70px;
                font-size: 26px;
                overflow: hidden;
            }

            .shopcart-subtitle {
                font-size: 24px;
                color: #999;
            }

            .shopcart-stepper {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .shopcart-price {
                    font-size: 30px;
                    color: $red;
                }
            }
        }

    }
    .van-button {
        height: 200px;
    }
}
.van-submit-bar{
    bottom:100px
}

</style>